import { Button, InputNumber, message, Modal, Radio, Select } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';
import enums from '../enums';
const { Option } = Select;

@connect(state => ({}))
export default class EditModal extends PureComponent {
  state = {
    riskEventType: enums.riskEventType.unstart.value,

    riskEventDayUnstart: null,
    riskEventDayEndUnstart: null,

    riskEventDayContinue: null,
    riskEventDayEndContinue: null,
    riskMileageContinue: null,
    riskMileageEndContinue: null,
    comparisonContinue: enums.riskEventCompare.greater.value,

    riskEventDayOverdue: null,
    riskEventDayEndOverdue: null,
    comparisonOverdue: enums.riskEventCompare.greater.value,

    riskEventDayLeave: null,
    riskEventDayEndLeave: null,
    comparisonLeave: enums.riskEventCompare.greater.value,

    riskEventDayLoss: null,
    riskEventDayEndLoss: null,

    submitBtnLoading: false,
  };

  componentDidMount() {
    const { editModalData } = this.props;
    if (editModalData.riskEventType === enums.riskEventType.unstart.value) {
      this.setState({
        riskEventType: editModalData.riskEventType,
        riskEventDayUnstart: editModalData.riskEventDay,
      });
    }
    if (editModalData.riskEventType === enums.riskEventType.continue.value) {
      this.setState({
        riskEventType: editModalData.riskEventType,
        riskEventDayContinue: editModalData.riskEventDay,
        riskMileageContinue: editModalData.riskMileage,
        comparisonContinue: editModalData.comparisonOperators,
      });
    }
    if (editModalData.riskEventType === enums.riskEventType.overdue.value) {
      this.setState({
        riskEventType: editModalData.riskEventType,
        riskEventDayOverdue: editModalData.riskEventDay,
        comparisonOverdue: editModalData.comparisonOperators,
      });
    }
    if (editModalData.riskEventType === enums.riskEventType.leave.value) {
      this.setState({
        riskEventType: editModalData.riskEventType,
        riskEventDayLeave: editModalData.riskEventDay,
        comparisonLeave: editModalData.comparisonOperators,
      });
    }
    if (editModalData.riskEventType === enums.riskEventType.loss.value) {
      this.setState({
        riskEventType: editModalData.riskEventType,
        riskEventDayLoss: editModalData.riskEventDay,
      });
    }
  }

  handleSubmit = () => {
    const { changeEditModalVisible, editModalData } = this.props;
    const {
      riskEventType,
      riskEventDayUnstart,
      riskEventDayContinue,
      riskMileageContinue,
      comparisonContinue,
      riskEventDayOverdue,
      comparisonOverdue,
      riskEventDayLeave,
      riskEventDayLoss,
      comparisonLeave,
    } = this.state;

    let submitData = {
      riskEventType,
      uuid: editModalData.uuid,
      enable: editModalData.enable,
    };

    if (riskEventType === enums.riskEventType.unstart.value) {
      if (!riskEventDayUnstart) {
        message.error('车辆未启动天数不能为空');
        return;
      }
      submitData.riskEventDay = riskEventDayUnstart;
      submitData.comparisonOperators = enums.riskEventCompare.greater.value;
    }
    if (riskEventType === enums.riskEventType.continue.value) {
      if (!riskEventDayContinue || !riskMileageContinue) {
        message.error('车辆连续行驶天数和里程不能为空');
        return;
      }
      submitData.riskEventDay = riskEventDayContinue;
      submitData.riskMileage = riskMileageContinue;
      submitData.comparisonOperators = comparisonContinue;
    }
    if (riskEventType === enums.riskEventType.overdue.value) {
      if (!riskEventDayOverdue) {
        message.error('车辆逾期天数不能为空');
        return;
      }
      submitData.riskEventDay = riskEventDayOverdue;
      submitData.comparisonOperators = comparisonOverdue;
    }
    if (riskEventType === enums.riskEventType.leave.value) {
      if (!riskEventDayLeave) {
        message.error('车辆离开管控区域天数不能为空');
        return;
      }
      submitData.riskEventDay = riskEventDayLeave;
      submitData.comparisonOperators = comparisonLeave;
    }
    if (riskEventType === enums.riskEventType.loss.value) {
      if (!riskEventDayLoss) {
        message.error('TBOX失联天数不能为空');
        return;
      }
      submitData.riskEventDay = riskEventDayLoss;
      submitData.comparisonOperators = enums.riskEventCompare.greater.value;
    }
    this.setState({
      submitBtnLoading: true,
    });
    this.props.dispatch({
      type: 'anomalousEvent/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/event/save',
        ...submitData,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          message.success('操作成功');
          changeEditModalVisible(true);
        } else {
          message.error(response.statusMessage);
        }
        this.setState({
          submitBtnLoading: false,
        });
      },
    });
  };

  handleRadioClick = e => {
    this.setState({
      riskEventType: e.target.value,
    });
  };

  render() {
    const {
      submitBtnLoading,
      riskEventType,
      riskEventDayUnstart,
      riskEventDayContinue,
      comparisonContinue,
      riskMileageContinue,
      comparisonOverdue,
      riskEventDayOverdue,
      comparisonLeave,
      riskEventDayLeave,
      riskEventDayLoss,
    } = this.state;
    const { changeEditModalVisible } = this.props;
    const radioStyle = {
      display: 'block',
      height: '50px',
      lineHeight: '50px',
    };
    return (
      <Modal
        title="修改异常事件"
        onCancel={() => changeEditModalVisible(false)}
        visible={true}
        footer={[
          <Button
            key="back"
            type="ghost"
            size="small"
            onClick={() => changeEditModalVisible(false)}
          >
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            size="small"
            loading={submitBtnLoading}
            onClick={() => this.handleSubmit()}
          >
            提交
          </Button>,
        ]}
      >
        <Radio.Group onChange={this.handleRadioClick} value={riskEventType}>
          <Radio
            disabled={riskEventType != enums.riskEventType.unstart.value}
            style={radioStyle}
            value={enums.riskEventType.unstart.value}
          >
            车辆未启动天数超过&nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.unstart.value}
              value={riskEventDayUnstart}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskEventDayUnstart: e,
                    riskEventDayEndUnstart: e,
                  });
                } else {
                  this.setState({
                    riskEventDayUnstart: null,
                    riskEventDayEndUnstart: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp;天
          </Radio>
          <Radio
            disabled={riskEventType != enums.riskEventType.continue.value}
            style={radioStyle}
            value={enums.riskEventType.continue.value}
          >
            连续&nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.continue.value}
              value={riskEventDayContinue}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskEventDayContinue: e,
                    riskEventDayEndContinue: e,
                  });
                } else {
                  this.setState({
                    riskEventDayContinue: null,
                    riskEventDayEndContinue: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp;天车辆行驶里程&nbsp;
            <Select
              disabled={riskEventType != enums.riskEventType.continue.value}
              value={comparisonContinue}
              onClick={e => {
                e.preventDefault();
                e.stopPropagation();
              }}
              onChange={e => {
                this.setState({
                  comparisonContinue: e,
                });
              }}
            >
              {enums.riskEventCompare.array.map(e => {
                return (
                  <Option key={e.value} value={e.value}>
                    {e.label}
                  </Option>
                );
              })}
            </Select>
            &nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.continue.value}
              value={riskMileageContinue}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskMileageContinue: e,
                    riskMileageEndContinue: e,
                  });
                } else {
                  this.setState({
                    riskMileageContinue: null,
                    riskMileageEndContinue: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp; 公里
          </Radio>
          <Radio
            disabled={riskEventType != enums.riskEventType.overdue.value}
            style={radioStyle}
            value={enums.riskEventType.overdue.value}
          >
            车辆逾期天数&nbsp;
            <Select
              disabled={riskEventType != enums.riskEventType.overdue.value}
              value={comparisonOverdue}
              onChange={e => {
                this.setState({
                  comparisonOverdue: e,
                });
              }}
              onClick={e => {
                e.preventDefault();
                e.stopPropagation();
              }}
            >
              {enums.riskEventCompare.array.map(e => {
                return (
                  <Option key={e.value} value={e.value}>
                    {e.label}
                  </Option>
                );
              })}
            </Select>
            &nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.overdue.value}
              value={riskEventDayOverdue}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskEventDayOverdue: e,
                    riskEventDayEndOverdue: e,
                  });
                } else {
                  this.setState({
                    riskEventDayOverdue: null,
                    riskEventDayEndOverdue: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp; 天
          </Radio>
          <Radio
            disabled={riskEventType != enums.riskEventType.leave.value}
            style={radioStyle}
            value={enums.riskEventType.leave.value}
          >
            车辆离开管控区域&nbsp;
            <Select
              disabled={riskEventType != enums.riskEventType.leave.value}
              value={comparisonLeave}
              onChange={e => {
                this.setState({
                  comparisonLeave: e,
                });
              }}
              onClick={e => {
                e.preventDefault();
                e.stopPropagation();
              }}
            >
              {enums.riskEventCompare.array.map(e => {
                return (
                  <Option key={e.value} value={e.value}>
                    {e.label}
                  </Option>
                );
              })}
            </Select>
            &nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.leave.value}
              value={riskEventDayLeave}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskEventDayLeave: e,
                    riskEventDayEndLeave: e,
                  });
                } else {
                  this.setState({
                    riskEventDayLeave: null,
                    riskEventDayEndLeave: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp; 天
          </Radio>
          <Radio
            disabled={riskEventType != enums.riskEventType.loss.value}
            style={radioStyle}
            value={enums.riskEventType.loss.value}
          >
            TBOX失联天数超过&nbsp;
            <InputNumber
              disabled={riskEventType != enums.riskEventType.loss.value}
              value={riskEventDayLoss}
              onChange={e => {
                if (e) {
                  this.setState({
                    riskEventDayLoss: e,
                    riskEventDayEndLoss: e,
                  });
                } else {
                  this.setState({
                    riskEventDayLoss: null,
                    riskEventDayEndLoss: null,
                  });
                }
              }}
              min={1}
            />
            &nbsp;天
          </Radio>
        </Radio.Group>
      </Modal>
    );
  }
}
